import { ModalForm } from '@ant-design/pro-components';
import { FlowTypeEnum, PayFlowDetailItem } from '../types.d';
import { ProTable } from '@ant-design/pro-components';

const FlowDetail = (props: {
  visible: boolean;
  flowDetails: Array<PayFlowDetailItem>;
  type: FlowTypeEnum;
  close: () => void;
}) => {
  const { visible, flowDetails = [], type, close } = props;
  return (
    <ModalForm
      title="流水详情"
      visible={visible}
      submitter={false}
      modalProps={{
        onCancel: () => close(),
        destroyOnClose: true,
      }}
    >
      <ProTable<PayFlowDetailItem>
        columns={[
          {
            title: type == FlowTypeEnum.MEMBER ? '会员卡号' : '订单编号',
            dataIndex: 'flowNo',
            align: 'center',
          },
          {
            title: '支付金额',
            dataIndex: 'amount',
            valueType: 'money',
            align: 'center',
            renderText: (text) => (text / 100).toFixed(2),
          },
        ]}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'small',
        }}
        options={false}
        size="small"
        search={false}
        dataSource={flowDetails}
      />
    </ModalForm>
  );
};

export default FlowDetail;
